<template>
	<el-dialog
		:title="title"
		width="1080px"
		:center="true"
		:append-to-body="true"
		:close-on-click-modal="false"
		:visible.sync="isShow"
	>
		<div class="best-wrap">
			<!-- 章节选择树 -->
			<div class="left-chapter">
				<div class="project-subject">
					<slot name="project">
						<div>项目：{{ projectName }}</div>
						<div>科目：{{ subjectName }}</div>
					</slot>
				</div>
				<div class="tree-box" v-loading="chapterLoading">
					<el-tree
						ref="chapterTreeRef"
						node-key="chapterId"
						:data="chapterTreeList"
						:props="{
							children: 'children',
							label: 'chapterTitle'
						}"
						:check-on-click-node="true"
						:expand-on-click-node="false"
						:default-expanded-keys="['']"
						:current-node-key="''"
						:highlight-current="true"
						@node-click="onClickChapter"
					>
						<template #default="{ node }">
							<div class="label-text" :title="node.label">{{ node.label }}</div>
						</template>
					</el-tree>
				</div>
			</div>
			<!-- 右侧区域 -->
			<div class="right-table">
				<!-- 筛选器 -->
				<el-form :inline="true" class="filtrate-form" size="mini">
					<el-form-item label="星级">
						<el-select v-model="filtrateForm.knowledgeStarLevel" placeholder="请选择星级">
							<el-option
								v-for="(value, key) in Dictionary.get('knowledgeStarLevel')"
								:key="key"
								:label="value"
								:value="key"
							/>
						</el-select>
					</el-form-item>
					<el-form-item label="知识点名称">
						<el-input v-model="filtrateForm.knowledgeTitle" placeholder="请输入知识点名称" />
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="filterSubmit">查询</el-button>
						<el-button @click="filterReset">重置</el-button>
					</el-form-item>
				</el-form>
				<!-- 表格列表 -->
				<el-table
					v-loading="tableLoading"
					:height="383"
					ref="table"
					:class="{radio : !isMultiple}"
					row-key="knowledgeId"
					:highlight-current-row="!isMultiple"
					:data="tableList"
					@current-change="currentChange"
					@select="selectionChange"
					@select-all="selectionChange"
				>
					<el-table-column
						v-if="isMultiple"
						align="center"
						type="selection"
						width="55"
					/>
					<el-table-column
						type="index"
						label="序号"
						width="65"
						align="center"
						:index="(index) => (page.pageIndex - 1) * page.pageSize + index + 1"
					/>
					<el-table-column prop="knowledgeName" label="知识点名称" />
					<el-table-column prop="date" label="星级" width="170">
						<template #default="{ row }">
							<div class="star-box">
								<img
									v-for="i in row.knowledgeStarLevel"
									:key="i"
									class="img"
									src="@rc/assets/images/star-ico.png"
									alt="星星"
								>
							</div>
						</template>
					</el-table-column>
				</el-table>
				<ve-pagination :get-page="queryTableData" :page.sync="page" />
			</div>
		</div>
		<div v-if="isMultiple" class="check-size-hint">
			共选择：
			<strong class="theme_font_color">{{ selectItems.length }}</strong> 个
		</div>
		<!-- 弹窗底部 -->
		<template #footer>
			<el-button @click="isShow = false">取 消</el-button>
			<el-button type="primary" @click="onSubmit">确 定</el-button>
		</template>
	</el-dialog>
</template>
<script src="./index.mjs"></script>

<style lang="less" scoped src="./index.less"></style>
